<template>
	<div class="jm-sheet">


		<div class="ty-bar-container">
			<div class="" style="display: inline-flex;">
				<!-- <div class="ty-bar-btn">
					<div class=""><button class="first" disabled="">首页</button></div>
				</div>
				<div class="jm-sheet-toolbar-divider"></div>
				<div class="ty-bar-btn">
					<div class=""><button class="last" disabled="">上一页</button></div>
				</div>
				<div class="jm-sheet-toolbar-divider"></div>
				<div class="ty-bar-input">
					<div class="btn-input"><input class="" type="text"></div>
					<div class="btn-text"><span class=""
							style="margin-left: 8px; display: inline-block; line-height: 17px;">/</span><span
							class="">1</span><span class=""></span></div>
				</div>
				<div class="jm-sheet-toolbar-divider"></div>
				<div class="jm-sheet-dropdown page-size">
					<div class="jm-sheet-dropdown-header">
						<div class="jm-sheet-dropdown-title">每页10条</div>
						<div class="jm-sheet-icon arrow-right">
							<div class="jm-sheet-icon-img arrow-down"></div>
						</div>
					</div>
					<div class="jm-sheet-dropdown-content" style="width: 100px; display: none;">
						<div class="jm-sheet-item">每页10条</div>
						<div class="jm-sheet-item">每页20条</div>
						<div class="jm-sheet-item">每页30条</div>
					</div>
				</div>
				<div class="jm-sheet-toolbar-divider"></div>
				<div class="ty-bar-btn">
					<div class=""><button class="next">下一页</button></div>
				</div>
				<div class="jm-sheet-toolbar-divider"></div>
				<div class="ty-bar-btn">
					<div class=""><button class="end">末页</button></div>
				</div> -->
				<div class="jm-sheet-toolbar-divider"></div>
				<div class="ty-bar-btn">
					<div class=""><button ref="printButton" v-print="printObj " class="print">打印</button></div>
				</div>
				
				<div class="jm-sheet-toolbar-divider"></div>
				<div class="ty-bar-btn" style="overflow: visible; z-index: 999;">
					
					<el-popover :width="100" popper-class="print-popover">
						<template #reference>
							<div>
								<button class="export" @click="exportChange">导出</button>
							</div>
							
						</template>
						<template #default>
							<div class="dropdown-list" style="width: 100px;">
								<!-- <div class="dropdown-item" id="Excel" @click="exportToExcel">测试Excel</div> -->
								<div class="dropdown-item" id="Excel" @click="exportExcel('#tableData','入库单打印.xlsx')">Excel</div>
								<div class="dropdown-item" id="PDF" @click="htmlToPDF('printMe','入库单打印')">PDF</div>
								<div class="dropdown-item" id="图片" @click="exportToImage('printMe', '物料打印')">图片</div>
							</div>
						</template>
					</el-popover>
				</div>
				<!-- <div class="jm-sheet-toolbar-divider"></div>
				<div class="ty-slider-container"><input class="ty-slider" type="range">
					<div class="ty-slider-tip" style="transform: translateX(-50%); left: 10%;">
						<div class="ty-slider-tip-arrow"></div>
						<div class="ty-slider-tip-text">1</div>
					</div>
				</div> -->
			</div>
		</div>
		<div id="printMe">
			<div class="ml-10 ">
				<div class="flex mt-5">
					<div class="print-left">
						<div v-if="orderInfo">入库单号：{{orderInfo.orderNo}}</div>
						<div style="margin-top: 10px;">打印时间：{{new Date().toLocaleString()}}</div>
					</div>
					<div class="flex-c">
						<span class="qrcode-label">入库单</span>
						<canvas ref="barcodeContainer"></canvas>
					</div>
				</div>
				
				<div v-if="orderInfo" id="tableData" style="width: 750px;margin-top: 20px;">
					<el-table :data="orderInfo.orderProducts" border>
						<el-table-column prop="code" label="物料编码" width="165" />
						<el-table-column prop="name" label="物料名称" />
						<el-table-column prop="planNum" label="计划数量" />
						<el-table-column prop="realNum" label="实际数量" />
						<el-table-column prop="categoryName" label="分类" />
						<el-table-column prop="unitName" label="单位" />
						<el-table-column prop="supplierName" label="供应商" />
					</el-table>
				</div>
			</div>
		</div>

	</div>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, toRaw, nextTick } from "vue";
	import { useRoute } from 'vue-router';
	import { getMaterialListApi } from "@/api/materialApi";
	import { getPurchaseOrderShowApi } from "@/api/receiptOrder";
	import JsBarcode from 'jsbarcode';
	import { exportExcel,htmlToPDF, exportToImage } from '@/utils/pdf'
	
	const route = useRoute();
	const purchaseOrderId = route.query.id;
	const orderInfo = ref();
	const barcodeContainer = ref(null);
	const format = 'CODE128'; // 条形码格式，例如CODE128, CODE39等
	const options = { // 条形码选项，例如宽度、高度等
		width: 2,
		height: 50,
		displayValue: true // 是否显示条形码下方的数字值（默认为true）
	};
	const getPurchaseOrder = async (maList) => {
		const res = await getPurchaseOrderShowApi({ purchaseOrderId: purchaseOrderId })
		if (res?.code === 200) {
			orderInfo.value = res.result
			for (let row of maList) {
				for (let item of orderInfo.value.orderProducts) {
					item.supplierName = orderInfo.value.supplier.name
					if (item.materialId === row.materialId) {
						item.name = row.name
						item.code = row.code
						item.unitName = row.unit.name
						item.categoryName = row.category.name
					}
				}
			}
			// 一维码
			JsBarcode(barcodeContainer.value, orderInfo.value.orderNo, { format, ...options });
		}
	}
	const getMaterialList = async () => {
		const res = await getMaterialListApi({ page: 1, perPage: 9999 })
		getPurchaseOrder(res?.result.list)
	}
	const showEcportType = ref(false)
	const exportChange = () => {
		showEcportType.value = !showEcportType.value
	}
	// 插件打印（推荐）
	const printObj = ref({
		id: "printMe", // 这里是要打印元素的ID
		// url:'https://www.baidu.com/',
		popTitle: "打印入库单", // 打印的标题
		// extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", // 打印可引入外部的一个 css 文件
		// extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 打印头部文字
		// preview: true, // 是否启动预览模式，默认是false
		previewTitle: '打印入库单', // 打印预览的标题
		previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
		zIndex: 20003, // 预览窗口的z-index，默认是20002，最好比默认值更高
		previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
		previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
		beforeOpenCallback(vue) {
			vue.printLoading = true
			console.log('开始打印之前！')
		}, // 开始打印之前的callback
		openCallback(vue) {
			vue.printLoading = false
			console.log('监听到了打印窗户弹起了！')
		}, // 调用打印时的callback
		closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(点击弹窗的取消和打印按钮都会触发)
		clickMounted() { console.log('点击v-print绑定的按钮了！') },

	})
	onMounted(() => {
		getMaterialList()
	})
	import FileSaver from 'file-saver';
	import * as XLSX from 'xlsx';
	const exportToExcel = ()=> {
	      const data = [
			{ ' ': '入库单号', '': '', '  ': orderInfo.value.orderNo },
			{ ' ': '打印时间', '': '', '  ': new Date().toLocaleString() },
	        // { 入库单号: orderInfo.value.orderNo,  },
	        // { 打印时间: new Date().toLocaleString() },
	        // { 入库单: JsBarcode(barcodeContainer.value, orderInfo.value.orderNo, { format, ...options }) },
	      ];
	      const ws = XLSX.utils.json_to_sheet(data);
	      const wb = XLSX.utils.book_new();
	      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
	      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
	      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
	      FileSaver.saveAs(blob, "data1.xlsx");
	}
</script>
<style>
	.print-popover.el-popover.el-popper {
		min-width: 130px;
	}
</style>
<style scoped>
	body {
		margin: 0;
	}

	.jm-sheet {
		font-size: 13px;
		line-height: normal;
		user-select: none;
		-moz-user-select: none;
		font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
		box-sizing: content-box;
		background: #fff;
		-webkit-font-smoothing: antialiased;
	}

	.jm-sheet textarea {
		font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
	}

	.jm-sheet-sheet {
		position: relative;
		overflow: hidden;
	}

	.jm-sheet-table {
		vertical-align: bottom;
	}

	.jm-sheet-tooltip {
		font-family: inherit;
		position: absolute;
		padding: 5px 10px;
		color: #fff;
		border-radius: 1px;
		background: #000000;
		font-size: 12px;
		z-index: 201;
	}

	.jm-sheet-tooltip:before {
		pointer-events: none;
		position: absolute;
		left: calc(50% - 4px);
		top: -4px;
		content: "";
		width: 8px;
		height: 8px;
		background: inherit;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		z-index: 1;
		box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.3);
	}

	.jm-sheet-color-palette {
		padding: 5px;
	}

	.jm-sheet-color-palette table {
		margin: 0;
		padding: 0;
		border-collapse: separate;
		border-spacing: 2px;
		background: #fff;
	}

	.jm-sheet-color-palette table td {
		margin: 0;
		cursor: pointer;
		border: 1px solid transparent;
	}

	.jm-sheet-color-palette table td:hover {
		border-color: #ddd;
	}

	.jm-sheet-color-palette table td .jm-sheet-color-palette-cell {
		width: 16px;
		height: 16px;
	}

	.jm-sheet-border-palette {
		padding: 6px;
	}

	.jm-sheet-border-palette table {
		margin: 0;
		padding: 0;
		border-collapse: separate;
		border-spacing: 0;
		background: #fff;
		table-layout: fixed;
	}

	.jm-sheet-border-palette table td {
		margin: 0;
	}

	.jm-sheet-border-palette .jm-sheet-border-palette-left {
		border-right: 1px solid #eee;
		padding-right: 6px;
	}

	.jm-sheet-border-palette .jm-sheet-border-palette-left .jm-sheet-border-palette-cell {
		width: 30px;
		height: 30px;
		cursor: pointer;
		text-align: center;
	}

	.jm-sheet-border-palette .jm-sheet-border-palette-left .jm-sheet-border-palette-cell .jm-sheet-icon-img {
		opacity: 0.8;
	}

	.jm-sheet-border-palette .jm-sheet-border-palette-left .jm-sheet-border-palette-cell:hover {
		background-color: #eee;
	}

	.jm-sheet-border-palette .jm-sheet-border-palette-right {
		padding-left: 6px;
	}

	.jm-sheet-border-palette .jm-sheet-border-palette-right .jm-sheet-toolbar-btn {
		margin-top: 0;
		margin-bottom: 3px;
	}

	.jm-sheet-border-palette .jm-sheet-border-palette-right .jm-sheet-line-type {
		position: relative;
		left: 0;
		top: -3px;
	}

	.jm-sheet-dropdown {
		position: relative;
	}

	.jm-sheet-dropdown .jm-sheet-dropdown-content {
		position: absolute;
		z-index: 200;
		background: #fff;
		box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
	}

	.jm-sheet-dropdown.page-size {
		padding: 10px;
	}

	.jm-sheet-dropdown.bottom-left .jm-sheet-dropdown-content {
		top: calc(100% + 5px);
		left: 0;
	}

	.jm-sheet-dropdown.bottom-right .jm-sheet-dropdown-content {
		top: calc(100% + 5px);
		right: 0;
	}

	.jm-sheet-dropdown .jm-sheet-dropdown-title {
		padding: 0 5px;
		display: inline-block;
	}

	.jm-sheet-dropdown .jm-sheet-dropdown-header .jm-sheet-icon.arrow-left {
		margin-left: 4px;
	}

	.jm-sheet-dropdown .jm-sheet-dropdown-header .jm-sheet-icon.arrow-right {
		width: 10px;
		margin-right: 4px;
	}

	.jm-sheet-dropdown .jm-sheet-dropdown-header .jm-sheet-icon.arrow-right .arrow-down {
		left: -130px;
	}

	/* resizer **/
	.jm-sheet-resizer {
		position: absolute;
		z-index: 11;
	}

	.jm-sheet-resizer .jm-sheet-resizer-hover {
		background-color: rgba(75, 137, 255, 0.25);
	}

	.jm-sheet-resizer .jm-sheet-resizer-hover.print-line {
		background-color: #fff;
		z-index: -1;
	}

	.jm-sheet-resizer .jm-sheet-resizer-line {
		position: absolute;
	}

	.jm-sheet-resizer.horizontal {
		cursor: row-resize;
	}

	.jm-sheet-resizer.horizontal .jm-sheet-resizer-line {
		border-bottom: 2px dashed #4b89ff;
		left: 0;
		bottom: 0;
	}

	.jm-sheet-resizer.vertical {
		cursor: col-resize;
	}

	.jm-sheet-resizer.vertical .jm-sheet-resizer-line {
		border-right: 2px dashed #4b89ff;
		top: 0;
		right: 0;
	}

	/* scrollbar */
	.jm-sheet-scrollbar {
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #f4f5f8;
		opacity: 0.9;
		/* issues/I4ONL5 图表控件挡住滚动条的问题,图表的zIndex是99  */
		z-index: 999;
	}

	.jm-sheet-scrollbar.horizontal {
		right: 15px;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.jm-sheet-scrollbar.horizontal>div {
		height: 1px;
		background: #ddd;
	}

	.jm-sheet-scrollbar.vertical {
		bottom: 15px;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.jm-sheet-scrollbar.vertical>div {
		width: 1px;
		background: #ddd;
	}

	/* @{css-prefix}-overlayer */
	.jm-sheet-overlayer {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	.jm-sheet-overlayer .jm-sheet-overlayer-content {
		position: absolute;
		overflow: hidden;
		pointer-events: none;
		width: 100%;
		height: 100%;
	}

	/* @{css-prefix}-overlayer-detail */
	.jm-sheet-overlayer-detail {
		position: absolute;
		left: 0;
		/*top: 0;*/
		z-index: 10;
	}

	.jm-sheet-overlayer-detail .jm-sheet-overlayer-detail-content {
		position: absolute;
		overflow: hidden;
		pointer-events: none;
		width: 100%;
		height: 100%;
	}

	.jm-sheet-editor,
	.jm-sheet-selector {
		box-sizing: content-box;
		position: absolute;
		overflow: hidden;
		pointer-events: none;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* @{css-prefix}-selector */
	.jm-sheet-selector .jm-sheet-selector-area {
		position: absolute;
		border: 2px solid #4b89ff;
		background: rgba(75, 137, 255, 0.1);
	}

	.jm-sheet-selector .jm-sheet-selector-clipboard,
	.jm-sheet-selector .jm-sheet-selector-autofill {
		position: absolute;
		background: transparent;
		z-index: 100;
	}

	.jm-sheet-selector .jm-sheet-selector-clipboard {
		border: 2px dashed #4b89ff;
	}

	.jm-sheet-selector .jm-sheet-selector-autofill {
		border: 1px dashed rgba(0, 0, 0, 0.45);
	}

	.jm-sheet-selector .jm-sheet-selector-corner {
		pointer-events: auto;
		position: absolute;
		cursor: crosshair;
		font-size: 0;
		height: 5px;
		width: 5px;
		right: -5px;
		bottom: -5px;
		border: 2px solid #ffffff;
		background: #4b89ff;
	}

	.jm-sheet-editor {
		z-index: 20;
	}

	.jm-sheet-editor .jm-sheet-editor-area {
		position: absolute;
		text-align: left;
		border: 2px solid #4b89ff;
		line-height: 0;
		z-index: 100;
		pointer-events: auto;
	}

	.jm-sheet-editor .jm-sheet-editor-area textarea {
		box-sizing: content-box;
		border: none;
		padding: 0 3px;
		outline-width: 0;
		resize: none;
		text-align: start;
		overflow-y: hidden;
		font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
		color: inherit;
		white-space: normal;
		word-wrap: break-word;
		line-height: 22px;
		margin: 0;
	}

	.jm-sheet-editor .jm-sheet-editor-area .textline {
		overflow: hidden;
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
	}

	.jm-sheet-editor .jm-sheet-editor-area.error {
		border-color: red;
	}

	.jm-sheet-item {
		user-select: none;
		background: 0;
		border: 1px solid transparent;
		outline: none;
		height: 26px;
		color: rgba(0, 0, 0, 0.9);
		line-height: 26px;
		list-style: none;
		padding: 2px 10px;
		cursor: default;
		text-align: left;
	}

	.jm-sheet-item.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.jm-sheet-item:hover,
	.jm-sheet-item.active {
		background: rgba(0, 0, 0, 0.05);
	}

	.jm-sheet-item.divider {
		height: 0;
		padding: 0;
		margin: 5px 0;
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.jm-sheet-item .label {
		float: right;
		opacity: 0.65;
		font-size: 1em;
		overflow: hidden;
		max-width: 125px;
		white-space: nowrap;
	}

	.x-spreadsheet-item.state,
	.x-spreadsheet-header.state {
		padding-left: 35px !important;
		position: relative;
	}

	.x-spreadsheet-item.state:before,
	.x-spreadsheet-header.state:before {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		left: 12px;
		top: calc(50% - 5px);
		background: rgba(0, 0, 0, 0.08);
		border-radius: 2px;
	}

	.x-spreadsheet-item.state.checked:before,
	.x-spreadsheet-header.state.checked:before {
		background: #4b89ff;
	}

	.jm-sheet-checkbox {
		position: relative;
		display: inline-block;
		backface-visibility: hidden;
		outline: 0;
		vertical-align: baseline;
		font-style: normal;
		font-size: 1rem;
		line-height: 1em;
	}

	.jm-sheet-checkbox>input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0 !important;
		outline: 0;
		z-index: -1;
	}

	.jm-sheet-suggest,
	.jm-sheet-contextmenu,
	.jm-sheet-sort-filter {
		position: absolute;
		box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
		background: #fff;
		z-index: 100;
		width: 260px;
		pointer-events: auto;
		overflow: auto;
	}

	.jm-sheet-suggest {
		width: 200px;
	}

	.jm-sheet-filter {
		border: 1px solid #e9e9e9;
		font-size: 12px;
		margin: 10px;
	}

	.jm-sheet-filter .jm-sheet-header {
		padding: 0.5em 0.75em;
		background: #f8f8f9;
		border-bottom: 1px solid #e9e9e9;
		border-left: 1px solid transparent;
	}

	.jm-sheet-filter .jm-sheet-body {
		height: 200px;
		overflow-y: auto;
	}

	.jm-sheet-filter .jm-sheet-body .jm-sheet-item {
		height: 20px;
		line-height: 20px;
	}

	.jm-sheet-sort-filter .jm-sheet-buttons {
		margin: 10px;
	}

	.jm-sheet-toolbar,
	.jm-sheet-bottombar {
		height: 40px;
		padding: 0 30px;
		text-align: left;
		background: #f5f6f7;
		display: flex;
	}

	.jm-sheet-toolbar.double-row {
		height: 80px;
	}

	.jm-sheet-toolbar.double-row .jm-sheet-toolbar-btns {
		display: block !important;
		width: 100%;
	}

	.jm-sheet-bottombar {
		border-top: 1px solid #e0e2e4;
	}

	.jm-sheet-toolbar {
		border-bottom: 1px solid #e0e2e4;
	}

	.jm-sheet-toolbar .jm-sheet-toolbar-btns {
		display: inline-flex;
	}

	.jm-sheet-toolbar .jm-sheet-toolbar-more {
		padding: 0 6px 6px;
		text-align: left;
	}

	.jm-sheet-toolbar .jm-sheet-toolbar-more .jm-sheet-toolbar-divider {
		margin-top: 0;
	}

	.jm-sheet-toolbar .jm-sheet-toolbar-btn {
		flex: 0 0 auto;
		display: inline-block;
		border: 1px solid transparent;
		height: 26px;
		line-height: 26px;
		min-width: 26px;
		margin: 6px 1px 0;
		padding: 0;
		text-align: center;
		border-radius: 2px;
	}

	.jm-sheet-toolbar .jm-sheet-toolbar-btn.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.jm-sheet-toolbar .jm-sheet-toolbar-btn:hover,
	.jm-sheet-toolbar .jm-sheet-toolbar-btn.active {
		background: rgba(0, 0, 0, 0.08);
	}

	.jm-sheet-toolbar-divider {
		display: inline-block;
		border-right: 1px solid #e0e2e4;
		width: 0;
		vertical-align: middle;
		height: 18px;
		margin: 1px 3px 0;
	}

	.ty-bar-container .jm-sheet-toolbar-divider {
		margin: 12px 3px 0;
	}

	.jm-sheet-calendar {
		color: rgba(0, 0, 0, 0.65);
		background: #ffffff;
		user-select: none;
	}

	.jm-sheet-calendar .calendar-header {
		font-weight: 700;
		line-height: 30px;
		text-align: center;
		width: 100%;
		float: left;
		background: #f9fafb;
	}

	.jm-sheet-calendar .calendar-header .calendar-header-left {
		padding-left: 5px;
		float: left;
	}

	.jm-sheet-calendar .calendar-header .calendar-header-right {
		float: right;
	}

	.jm-sheet-calendar .calendar-header .calendar-header-right a {
		padding: 3px 0;
		margin-right: 2px;
		border-radius: 2px;
	}

	.jm-sheet-calendar .calendar-header .calendar-header-right a:hover {
		background: rgba(0, 0, 0, 0.08);
	}

	.jm-sheet-calendar .calendar-body {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.jm-sheet-calendar .calendar-body th,
	.jm-sheet-calendar .calendar-body td {
		width: 14.28571429%;
		min-width: 32px;
		text-align: center;
		font-weight: 700;
		line-height: 30px;
		padding: 0;
	}

	.jm-sheet-calendar .calendar-body td>.cell:hover {
		background: #ecf6fd;
	}

	.jm-sheet-calendar .calendar-body td>.cell.active,
	.jm-sheet-calendar .calendar-body td>.cell.active:hover {
		background: #ecf6fd;
		color: #2185D0;
	}

	.jm-sheet-calendar .calendar-body td>.cell.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.jm-sheet-datepicker {
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
		position: absolute;
		left: 0;
		top: calc(100% + 5px);
		z-index: 10;
		width: auto;
	}

	.jm-sheet-buttons {
		display: flex;
		justify-content: flex-end;
	}

	.jm-sheet-buttons .jm-sheet-button {
		margin-left: 8px;
	}

	.jm-sheet-button {
		display: inline-block;
		border-radius: 3px;
		line-height: 1em;
		min-height: 1em;
		white-space: nowrap;
		text-align: center;
		cursor: pointer;
		font-size: 1em;
		font-weight: 700;
		padding: 0.75em 1em;
		color: rgba(0, 0, 0, 0.6);
		background: #E0E1E2;
		text-decoration: none;
		font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
		outline: none;
		vertical-align: baseline;
		zoom: 1;
		user-select: none;
		transition: all 0.1s linear;
	}

	.jm-sheet-button.active,
	.jm-sheet-button:hover {
		background-color: #C0C1C2;
		color: rgba(0, 0, 0, 0.8);
	}

	.jm-sheet-button.primary {
		color: #fff;
		background-color: #2185D0;
	}

	.jm-sheet-button.primary:hover,
	.jm-sheet-button.primary.active {
		color: #fff;
		background-color: #1678c2;
	}

	.jm-sheet-form-input {
		font-size: 1em;
		position: relative;
		font-weight: 400;
		display: inline-flex;
		color: rgba(0, 0, 0, 0.87);
	}

	.jm-sheet-form-input input {
		z-index: 1;
		margin: 0;
		max-width: 100%;
		flex: 1 0 auto;
		outline: 0;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		text-align: left;
		line-height: 30px;
		height: 30px;
		padding: 0 8px;
		background: #fff;
		border: 1px solid #e9e9e9;
		border-radius: 3px;
		transition: box-shadow 0.1s ease, border-color 0.1s ease;
		box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
	}

	.jm-sheet-form-input input:focus {
		border-color: #4b89ff;
		box-shadow: inset 0 1px 2px rgba(75, 137, 255, 0.2);
	}

	.jm-sheet-form-select {
		position: relative;
		display: inline-block;
		background: #fff;
		border: 1px solid #e9e9e9;
		border-radius: 2px;
		cursor: pointer;
		color: rgba(0, 0, 0, 0.87);
		user-select: none;
		box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
		width: 92px;
		white-space: nowrap;
	}

	.jm-sheet-form-select .input-text {
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 60px;
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 8px;
	}

	.jm-sheet-form-fields {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.jm-sheet-form-fields .jm-sheet-form-field {
		flex: 0 1 auto;
	}

	.jm-sheet-form-fields .jm-sheet-form-field .label {
		display: inline-block;
		margin: 0 10px 0 0;
	}

	.jm-sheet-form-field {
		display: block;
		vertical-align: middle;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	.jm-sheet-form-field:first-child {
		margin-left: 0;
	}

	.jm-sheet-form-field.error .jm-sheet-form-select,
	.jm-sheet-form-field.error input {
		border-color: #f04134;
	}

	.jm-sheet-form-field .tip {
		color: #f04134;
		font-size: 0.9em;
	}

	.jm-sheet-dimmer {
		display: none;
		position: absolute;
		top: 0 !important;
		left: 0 !important;
		width: 100%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
		background-color: rgba(0, 0, 0, 0.6);
		opacity: 0;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		transition: background-color 0.5s linear;
		user-select: none;
		z-index: 1000;
	}

	.jm-sheet-dimmer.active {
		display: block;
		opacity: 1;
	}

	.jm-sheet-modal,
	.jm-sheet-toast {
		font-size: 13px;
		position: fixed;
		z-index: 1001;
		text-align: left;
		line-height: 1.25em;
		min-width: 360px;
		color: rgba(0, 0, 0, 0.87);
		font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
		border-radius: 4px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		background-color: #fff;
		background-clip: padding-box;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px;
	}

	.jm-sheet-toast {
		background-color: rgba(255, 255, 255, 0.85);
	}

	.jm-sheet-modal-header,
	.jm-sheet-toast-header {
		font-weight: 600;
		background-clip: padding-box;
		background-color: rgba(255, 255, 255, 0.85);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		border-radius: 4px 4px 0 0;
	}

	.jm-sheet-modal-header .jm-sheet-icon,
	.jm-sheet-toast-header .jm-sheet-icon {
		position: absolute;
		right: 0.8em;
		top: 0.65em;
		border-radius: 18px;
	}

	.jm-sheet-modal-header .jm-sheet-icon:hover,
	.jm-sheet-toast-header .jm-sheet-icon:hover {
		opacity: 1;
		background: rgba(0, 0, 0, 0.08);
	}

	.jm-sheet-toast-header {
		color: #F2711C;
	}

	.jm-sheet-modal-header {
		border-bottom: 1px solid #e0e2e4;
		background: rgba(0, 0, 0, 0.08);
		font-size: 1.0785em;
	}

	.jm-sheet-modal-header,
	.jm-sheet-modal-content,
	.jm-sheet-toast-header,
	.jm-sheet-toast-content {
		padding: 0.75em 1em;
	}

	@media screen and (min-width: 320px) and (max-width: 480px) {
		.jm-sheet-toolbar {
			display: none;
		}
	}

	.jm-sheet-icon {
		width: 18px;
		height: 18px;
		margin: 1px 1px 2px 1px;
		text-align: center;
		vertical-align: middle;
		user-select: none;
		overflow: hidden;
		position: relative;
		display: inline-block;
	}

	.ty-bar-container {
		border-bottom: 1px solid #e0e2e4;
		height: 40px;
		text-align: left;
		background: #f5f6f7;
		display: flex;
	}

	.ty-bar-btn {
		padding: 8px 2px 0 2px;
		vertical-align: middle;
		text-align: center;
		overflow: hidden;
	}

	.ty-bar-btn>div {
		padding: 4px;
	}

	.ty-bar-btn>div:hover {
		background-color: #eeeeee;
	}

	.ty-bar-btn .dropdown-list {
		top: calc(100% + 2px);
		left: 0;
		width: 100px;
		position: absolute;
		z-index: 200;
		background: #fff;
		box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
	}

	.dropdown-item {
		user-select: none;
		background: 0;
		border: 1px solid transparent;
		outline: none;
		color: rgba(0, 0, 0, 0.9);
		line-height: 26px;
		list-style: none;
		padding: 2px 10px;
		cursor: default;
		text-align: left;
		width: 100px;
	}

	.dropdown-item:hover,
	.dropdown-item.active {
		background: rgba(0, 0, 0, 0.05);
	}

	.ty-bar-btn button {
		border: 0 none;
		background: transparent;
		padding-right: 3px;
		cursor: pointer;
		margin: 0;
		overflow: hidden !important;
		width: auto;
		*width: 100%;
		-moz-outline: 0 none;
		outline: 0 none;
		line-height: 18px;
		height: 18px;
		background-repeat: no-repeat !important;
	}

	.ty-bar-btn .first {
		padding-left: 20px;
		background-image: url(@/assets/icons/first.png) !important;
		background-size: 16px 16px;
	}

	.ty-bar-btn .last {
		padding-left: 16px;
		height: 18px;
		line-height: 18px;
		background-image: url(@/assets/icons/prev.png) !important;
		background-size: 16px 16px;
	}

	.ty-bar-btn .next {
		padding-left: 14px;
		line-height: 16px;
		background-image: url(@/assets/icons/next.png) !important;
		background-size: 16px 16px;
	}

	.ty-bar-btn .end {
		padding-left: 20px;
		line-height: 16px;
		background-image: url(@/assets/icons/last.png) !important;
		background-size: 16px 16px;
	}

	.ty-bar-btn .print {
		padding-left: 20px;
		background-image: url(@/assets/icons/print.png) !important;
		background-size: 16px 16px;
	}

	.ty-bar-btn .export {
		padding-left: 19px;
		line-height: 18px;
		background-image: url(@/assets/icons/export.png) !important;
		background-size: 17px 17px;
	}

	.ty-bar-input {
		position: relative;
		padding: 0 6px 2px 6px;
		vertical-align: middle;
		text-align: center;
		overflow: hidden;
		display: inline-block;
	}

	.ty-bar-container .ty-bar-input {
		padding: 7px 6px 2px 6px;
	}

	.ty-bar-input input:hover,
	.ty-bar-input input:focus {
		border-color: #4b89ff;
		outline-color: #4b89ff;
	}

	.btn-input {
		padding: 4px;
		text-align: center;
		display: inline-block;
	}

	.btn-input>input {
		font-size: 12px;
		width: 42px;
		height: 16px;
		text-align: center;
		height: 18px;
		line-height: 18px;
		border: 1px solid #b5b8c8;
		vertical-align: middle;
		padding: 1px 3px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0;
	}

	.btn-input>input:active,
	.btn-input>input:focus {
		border: 1px solid #7eadd9;
	}



	/* 滑块-begin */
	.ty-slider-tip {
		position: absolute;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		color: rgba(0, 0, 0, 0.65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
		font-feature-settings: "tnum";
		z-index: 999;
		max-width: 250px;
		visibility: visible;
		padding-bottom: 8px;
		top: 32px;
		display: none;
	}

	.ty-slider-container:hover .ty-slider-tip {
		display: block;
	}

	.ty-slider-tip-arrow {
		position: absolute;
		display: block;
		width: 16px;
		height: 16px;
		overflow: hidden;
		background: transparent;
		pointer-events: none;
		top: -14px;
		left: 50%;
		transform: translateX(-50%);
	}

	.ty-slider-tip-arrow:before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: 5px;
		height: 5px;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.75);
		content: "";
		pointer-events: auto;
		box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
		transform: translateY(6.53553391px) rotate(45deg);
	}

	.ty-slider-tip-text {
		min-width: unset;
		padding: 2px 6px;
		color: #fff !important;
		text-align: left;
		text-decoration: none;
		word-wrap: break-word;
		background-color: rgba(0, 0, 0, 0.75);
		border-radius: 4px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}

	input.ty-slider[type=range]::-webkit-slider-thumb {
		width: 12px;
		height: 12px;
		border: 2px solid #1890ff;
		background-color: #fff;
		border-radius: 50%;
		-webkit-transition: border-color 0.15s, background-color 0.15s;
		transition: border-color 0.15s, background-color 0.15s;
		cursor: pointer;
		background-clip: padding-box;
		box-sizing: border-box;
	}

	input.ty-slider[type=range]::-webkit-slider-thumb:hover {
		box-shadow: 0px 0px 5px blue;
	}

	.ty-slider_thumb:active,
	input.ty-slider[type=range] {
		height: 3px;
		margin: 0;
		padding: 0;
		cursor: pointer;
		border: 0;
		/**background-color: #45bd5c;*/
		background: -webkit-linear-gradient(#40c35f, #40c35f) no-repeat #cccccc;
		background-size: 0% 100%;
	}

	.ty-slider_track>span {
		display: block;
		width: 0%;
		height: 100%;
		background-color: #40c35f;
	}

	.ty-slider_tips {
		position: absolute;
		margin-top: -2em;
		width: 6em;
		text-align: center;
		margin-left: -3em;
	}

	.ty-slider_thumb>.ty-slider_tips {
		margin-left: -2.15em;
	}

	.ty-slider_tips>span {
		position: relative;
		display: inline-block;
		padding: 0 3px;
		min-width: 1.2em;
		color: white;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 3px;
		text-align: center;
	}

	.ty-slider_tips>span::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -0.25em;
		margin-left: -0.3em;
		border: 0.3em solid rgba(0, 0, 0, 0.5);
		border-right-color: transparent;
		border-left-color: transparent;
		border-bottom: 0;
	}

	/*Real Range*/
	input.ty-slider[type=range] {
		position: relative;
		outline: 0;
		-webkit-appearance: none !important;
	}

	input.ty-slider[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none !important;
	}

	/*Virtual Range*/
	.ty-slider {
		display: inline-block;
		position: relative;
		width: 100%;
		font-size: 1em;
	}

	.ty-slider_thumb {
		position: absolute;
		top: 0;
		margin-left: -0.85em;
	}

	.ty-slider_thumb.ondrag>.ty-slider_tips {
		visibility: visible;
	}

	.ty-slider-container {
		width: 100px;
		position: relative;
		padding-top: 10px;
	}
	.print-left {
		margin-right: 80px;
		margin-top: 20px;
	}
	.qrcode-label {
		font-size: 22px;
		margin-right: 20px;
		font-weight: 600;
	}
</style>